<template>
  <div class="app-container" v-loading="loading">
     <el-form  :inline="true" ref="ruleForm" :rules="refRule" :model="form" class="demo-form-inline" label-width="80px">
        <el-form-item label="索引选择" prop="indexType" label-width="">
         <el-select v-model="form.indexType">
           <el-option v-for="(item,index) in indexList"
           :label="item"
           :key="index"
           :value="item"
           >
           </el-option>
         </el-select>
       </el-form-item>
       <br/>
      <el-form-item label="查询参数" prop="queryParam" >
        <el-input type="textarea"  rows="10" v-model="form.queryParam"></el-input>
      </el-form-item>
       <br/>
      <el-form-item >
        <div  slot="label"></div>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索
        </el-button>
        <el-button type="primary"  @click="download" v-if="roleCheck('data-download')">下载</el-button>
      </el-form-item>
       <br/>
       <el-form-item>
         <div slot="label"></div>
         <el-input type="textarea" rows="25" style="margin:20px 0;" v-if="result!='{}'" :value="JSON.stringify(result,null,2)" />
       </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { grid } from '@/build';
import { esList, esExport, indexTypeList } from '@/services/api/gameDataManage';

export default {
  name: 'tab-one',
  mixins: [grid],
  components: {

  },

  data() {
    return {
      loading: false,
      indexList: [],
      refRule: {
        indexType: [
          { required: true, message: '请选择索引', trigger: 'change' },
        ],
        queryParam: [
          { required: true, message: '请输入查询参数', trigger: 'change' },
        ],

      },
      result: {},
      form: {
        // exportExcel: false,
        queryParam: '',
        indexType: undefined,
      },
      filters: {
        // exportExcel: false,
        queryParam: '',
        indexType: undefined,
      },


    };
  },

  methods: {
    submitFilterForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.filters = { ...this.filters, ...this.form };
          this.loading = true;
          this.doGet({ action: 'getGrid' });
        } else {
          return false;
        }
      });
    },
    download() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.exportExcel({ action: 'getExportExcel' });
        } else {
          return false;
        }
      });
    },

  },
  mounted() {
    this.bindGet(indexTypeList, 'indexList', {
      action: 'getIndexList',

    });
    this.getAll();
    this.bindGet(esList, 'result', {
      action: 'getGrid',
      sendingData: 'filters',
      // format: (data) => {
      //   this.result = data;
      //   console.log(JSON.stringify(data));
      //   return data;
      // },
      callback: ([result, data]) => {
        this.loading = false;
        this.result = data;
      },

    });
    this.bindGet(esExport, 'result', {
      action: 'getExportExcel',
      sendingData: 'filters',
    });
  },
};
</script>
<style scoped lang="scss">
  .app-container{
    /deep/ {
      .el-form{
        .el-form-item:nth-child(3),.el-form-item:last-child{
          width:100%;
          .el-form-item__content{
            width:calc( 90% - 100px);
          }
        }
      }
    }
  }
  .mgtop{
    margin-top:30px;
  }
</style>
